<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="200px">
      <el-form-item label="代理商姓名" prop="memberId">
        <el-input v-model="queryParams.proxyName" placeholder="请输入代理商姓名" clearable @keyup.enter="handleQuery"
          class="!w-240px" />
      </el-form-item>
      <el-form-item label="代理地区" prop="proxyArea">
        <el-tree-select v-model="queryParams.proxyArea" placeholder="请选择代理地区" clearable :data="areaList"
          :props="defaultProps" :render-after-expand="true" class="!w-240px" />
      </el-form-item>
      <el-form-item label="状态" prop="sex">
        <el-select v-model="queryParams.applyStatus" placeholder="请选择申请状态" clearable class="!w-240px">
          <el-option v-for="dict in option" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="代理商姓名" align="center" prop="proxyName" />
      <el-table-column label="公司名称" align="center" prop="proxyCompany" />
      <el-table-column label="代理地址" align="center" prop="proxyArea" />
      <el-table-column label="收款人姓名" align="center" prop="accountName" />
      <el-table-column label="收款人账户" align="center" prop="accountNo" />
      <el-table-column label="转账类型" align="center" prop="transferType" />
      <el-table-column label="提现金额" align="center" prop="price" />
      <el-table-column label="状态" align="center" prop="applyStatus" />
      <el-table-column label="操作" align="center" class="w-120px">
        <template #default="scope">
          <el-button type="primary" plain @click="openForm('update', scope.row)" :disabled="disabledShenhe(scope.row)">
            审核
          </el-button>
          <el-button type="danger" plain @click="handleDelete(scope.row)"
            :disabled="disabledOrder(scope.row)">
            完成
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </ContentWrap>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form ref="formRef" :model="formData" label-width="100px" v-loading="formLoading">
      <el-form-item label="代理商姓名" prop="proxyName">
        <el-input disabled v-model="formData.proxyName" placeholder="代理商姓名" />
      </el-form-item>
      <el-form-item label="代理地区" prop="proxyArea">
        <el-input disabled v-model="formData.proxyArea" placeholder="代理地区" />
      </el-form-item>
      <el-form-item label="公司名称" prop="proxyCompany">
        <el-input disabled v-model="formData.proxyCompany" placeholder="公司名称" />
      </el-form-item>
      <el-form-item label="提现账户" prop="accountNo">
        <el-input disabled v-model="formData.accountNo" placeholder="提现账户" />
      </el-form-item>
      <el-form-item label="提现金额" prop="price">
        <el-input disabled v-model="formData.price" placeholder="提现金额" />
      </el-form-item>
      <el-form-item label="状态" prop="applyStatus">
        <el-input disabled v-model="formData.applyStatus" placeholder="申请状态" />
      </el-form-item>
      <el-form-item label="收款人姓名" prop="accountName">
        <el-input disabled v-model="formData.accountName" placeholder="收款人姓名" />
      </el-form-item>
      <el-form-item label="提现类型" prop="transferType">
        <el-input disabled v-model="formData.transferType" placeholder="提现类型" />
      </el-form-item>
      <el-form-item label="备注" prop="subject">
        <el-input type="textarea" :rows="4" v-model="formData.subject" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary">通过</el-button>
      <el-button @click="rejectSubmit">驳回</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { WithdrawDepositApi } from '@/api/member/withdrawdeposit'
import { ElMessageBox } from 'element-plus'
import * as AreaApi from '@/api/system/area'
import { defaultProps } from '@/utils/tree'
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  proxyName: undefined,
  proxyArea: undefined,
  applyStatus: undefined
})
const loading = ref(false)
const list = ref([])
const total = ref(0)
const areaList = ref([])
const dialogTitle = ref('提现审核')
const dialogVisible = ref(false)
let formData = reactive({
  accountName: undefined,
  accountNo: undefined,
  accountType: undefined,
  appid: undefined,
  applyStatus: undefined,
  channelCode: undefined,
  channelId: undefined,
  createTime: undefined,
  deleted: undefined,
  id: undefined,
  price: undefined,
  proxyArea: undefined,
  proxyCompany: undefined,
  proxyId: undefined,
  proxyName: undefined,
  subject: undefined,
  totalPrice: undefined,
  transferId: undefined,
  transferType: undefined,
  updateTime: undefined,
})
const option = reactive([
  { value: 0, label: '已申请' },
  { value: 1, label: '通过' },
  { value: 2, label: '不通过' },
  { value: 3, label: '撤销' },
  { value: 4, label: '已完成' },
])
const disabledOrder = (row) => {
  console.log('8',row);
  if (row.applyStatus === '通过') {
    return false
  }else{
    return true
  }
}
const disabledShenhe = (row) => {
  if (row.applyStatus === '已申请') {
    return false
  }else{
    return true
  }
}
const handleQuery = () => {
  getList()
}
const formLoading = ref(false)
const message = useMessage()
const openForm = (type: string, row?: any) => {
  console.log('1', type, row.accountNo);
  dialogVisible.value = true
  formData = row
}
const handleDelete = async (row: any) => {
  ElMessageBox.confirm(
    '请确认已线下转账成功，此操作会扣除代理商收入余额',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      clickFinish(row)
    })
    .catch(() => {
      console.log('用户点击取消');

    })
}
const clickFinish = async (row) => {
  try {
    const list = {
      id: row.id,
      applyStatus: 4,
    }
    const data = await WithdrawDepositApi.updateWithdrawDepositPage(list)
    if (data === true) {
      message.success('审核成功')
      getList()
    } else {
      message.error('请求错误')
    }
  } finally {
    dialogVisible.value = false
  }
}
const submitForm = async () => {
  try {
    const list = {
      id: formData.id,
      applyStatus: 1,
      subject: formData.subject
    }
    const data = await WithdrawDepositApi.updateWithdrawDepositPage(list)
    if (data === true) {
      message.success('审核成功')
      getList()
    } else {
      message.error('请求错误')
    }
  } finally {
    dialogVisible.value = false
  }
}
const rejectSubmit = async () => {
  try {
    const list = {
      id: formData.id,
      applyStatus: 2,
      subject: formData.subject
    }
    const data = await WithdrawDepositApi.updateWithdrawDepositPage(list)
    if (data === true) {
      message.success('审核成功')
      getList()
    } else {
      message.error('请求错误')
    }
  } finally {
    dialogVisible.value = false
  }
}
const getList = async () => {
  loading.value = true
  try {
    const data = await WithdrawDepositApi.getWithdrawDepositPage(queryParams)
    areaList.value = await AreaApi.getAreaTree()
    const dataList = data.list.map((item) => {
      item.transferType = item.transferType === 1 ? '微信' : item.transferType === 2 ? '支付宝' : '银行卡'
      item.applyStatus = item.applyStatus === 0 ? '已申请' : item.applyStatus === 1 ? '通过' : item.applyStatus === 2 ? '不通过' : item.applyStatus === 3 ? '撤销' : '已完成'
      item.price = (item.price / 100).toFixed(2)
      return item
    })
    list.value = dataList
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const resetQuery = () => {
  console.log(12);
  queryParams.proxyName = undefined,
    queryParams.proxyArea = undefined,
    queryParams.applyStatus = undefined

}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>